<template>
    <div id="review-show">
        <div class="rText">
            <div class="til">首页>专家评审>{{ opus.title }}</div>
            <div class="bk1">
                <h1 style="margin: 1.2vw;">{{ opus.title }}</h1>
                <div style="margin: 1.2vw;">所属分类：{{ getClass() }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 提交时间：{{ opus.createTime }}</div>
                <table>
                    <tr>
                        <td>课堂实录</td>
                        <td>
                            <template v-for="(video,index) in videoList">
                                <video style="width: 18vw;height: 12vw;margin: 0.5vw;" :src="'http://reg.vip.cpolar.cn'+video.url" controls>您的浏览器不支持视频播放</video>
                            </template>
                        </td>
                    </tr>
                    <tr>
                        <td>教案</td>
                        <td>
                            <div class="pdfg" v-if="jiaoan.subTitle.length>0">
                                <img src="../assets/img/PdfType.png"/>
                                <span class="pdfname">{{ jiaoan.subTitle }}</span>
                                <div class="pdfg" @click="download(jiaoan.url)" style="width: 6vw;margin-left: 70%;"><img src="../assets/img/矢量智能对象 拷贝 5(1).png" /><span style="margin-left: 1.2vw;">下载</span></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>教学实施报告</td>
                        <td>
                            <div class="pdfg" v-if="baogao.subTitle.length>0">
                                <img src="../assets/img/PdfType.png"/>
                                <span class="pdfname">{{ baogao.subTitle }}</span>
                                <div class="pdfg" @click="download(baogao.url)" style="width: 6vw;margin-left: 70%;"><img src="../assets/img/矢量智能对象 拷贝 5(1).png" /><span style="margin-left: 1.2vw;">下载</span></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>专业人才培养方案</td>
                        <td>
                            <div class="pdfg" v-if="fangan.subTitle.length>0">
                                <img src="../assets/img/PdfType.png"/>
                                <span class="pdfname">{{ fangan.subTitle }}</span>
                                <div class="pdfg" @click="download(fangan.url)" style="width: 6vw;margin-left: 70%;"><img src="../assets/img/矢量智能对象 拷贝 5(1).png" /><span style="margin-left: 1.2vw;">下载</span></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>课程标准</td>
                        <td>
                            <div class="pdfg" v-if="biaozhun.subTitle.length>0">
                                <img src="../assets/img/PdfType.png"/>
                                <span class="pdfname">{{ biaozhun.subTitle }}</span>
                                <div class="pdfg" @click="download(biaozhun.url)" style="width: 6vw;margin-left: 70%;"><img src="../assets/img/矢量智能对象 拷贝 5(1).png" /><span style="margin-left: 1.2vw;">下载</span></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>教材选用说明</td>
                        <td>
                            <div class="pdfg" v-if="shuoming.subTitle.length>0">
                                <img src="../assets/img/PdfType.png"/>
                                <span class="pdfname">{{ shuoming.subTitle }}</span>
                                <div class="pdfg" @click="download(shuoming.url)" style="width: 6vw;margin-left: 70%;"><img src="../assets/img/矢量智能对象 拷贝 5(1).png" /><span style="margin-left: 1.2vw;">下载</span></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="bk2">
                <h2 style="margin: 1.2vw;">评审</h2>
                <el-form class="form" ref="ruleFormRef" :rules="rules" :model="ruleForm">
                    <table>
                        <tr>
                            <th>一级指标</th>
                            <th>二级指标</th>
                            <th>评审标准</th>
                            <th>各项得分</th>
                            <th>总得分</th>
                        </tr>
                        <tr>
                            <td rowspan="6">2023年某某市职业院校技能大赛教学能力比赛评分指标(100分)</td>
                            <td>教学实施报告(20分)</td>
                            <td>1.教学理念先进，教学设计科学合理 (4分)2.教学实施以生为本，落实教学设计，教学有创新 (4分)3.学生学习效果突出，与教学内容、活动关联性强 (4分)
                                4.教学反思深刻，改进举措针对性强、扎实有效(4分)5.报告系统性强，行文规范、逻辑严递、符合实际 (4分)
                            </td>
                            <td>
                                <el-form-item prop="dimension1" required>
                                    <el-input v-model="ruleForm.dimension1" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                            <td rowspan="6">{{ comScord }}</td>
                        </tr>
                        <tr>
                            <td>教案(20分)</td>
                            <td>1.教学要素完整，版式规范，详略得当(4分)2.课程思政系统设计，有机融入，培养学生的职业综合素养 (4分)3.学情分析精准聚焦，教学目标可评可测(4分)
                                4.教学内容科学严谨，教学策略运用恰当(4分)5.教学评价科学合理，课后反思真实深刻(4分)
                            </td>
                            <td>
                                <el-form-item prop="dimension2" required>
                                    <el-input v-model="ruleForm.dimension2" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>视烦资料(40分)</td>
                            <td>1.坚持立德树人，德技并修(12分)2.凸显职业教育类型特色，体现以生为本(7分)3.课堂教学质量高、效果好，反映师生真实教学状态(7分)
                                4.数字技术与教学方式方法运用恰当，体现深度学习(7分)5.展示教师良好综合素养，展现团队优势(7分)
                            </td>
                            <td>
                                <el-form-item prop="dimension3" required>
                                    <el-input v-model="ruleForm.dimension3" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>专业人才培养方案(8分)</td>
                            <td>1.符合最新文件要求，科学规范制定(3分)2.坚持全面发展，体现培养特色，文本规范严逆(3分)3.体现优化改进，明确多方参与 (2分)</td>
                            <td>
                                <el-form-item prop="dimension4" required>
                                    <el-input v-model="ruleForm.dimension4" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>课程标准（或实施案）(8分)</td>
                            <td>1,落实职业教育国家教学标准(3分)2.条目齐全完备，科学规范(3分)3.具有时代特色，体现（学科） 技术领域发展(2分)</td>
                            <td>
                                <el-form-item prop="dimension5" required>
                                    <el-input v-model="ruleForm.dimension5" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>教材选用说明(4分)</td>
                            <td>1.符合国家关于教材使用相关规定和要求(2分)2.明确选用制度与机制及执行情况(2分)</td>
                            <td>
                                <el-form-item prop="dimension6" required>
                                    <el-input v-model="ruleForm.dimension6" autocomplete="off" placeholder="请输入参赛学校"/>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                    <h2 style="margin: 1.2vw;">评审意见</h2>
                    <el-form-item prop="dimension1" required>
                        <el-input v-model="ruleForm.mark" style="margin: 1.2vw;width: 90%;" type="textarea" placeholder="请输入"/>
                    </el-form-item>
                </el-form>
                <div style="width: 90%;display: flex;justify-content: center;margin-bottom: 3vw;">
                    <el-button type="primary" @click="toPre">上一个</el-button>
                    <el-button type="primary" @click="toSumb(ruleFormRef)">保存</el-button>
                    <el-button type="primary" @click="toNext(ruleFormRef)">保存并评审下一个</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted,computed} from 'vue'
import {getReviewMsg} from '@/api/review'
import {useGlobStore} from '@/stores/useGlobStore'
import {ElMessage,ElLoading} from 'element-plus';
import {useRouter } from 'vue-router'
import { storeToRefs} from 'pinia' 
import type { FormInstance, FormRules} from 'element-plus'
import{addScord} from '@/api/review'

const  router = useRouter();
const store = useGlobStore();
const {reviewId,tableData,reviewIndex} = storeToRefs(store);
const opus = ref({
    title: "", //'标题', 
    itemId: 0,
    classOne: 0,
    createTime: '',
    dsItemSubList:[{keyWord: "",url: "",fileType: 1,subTitle: ""}]
})
const videoList = ref([{keyWord: "",url: "",fileType: 1,subTitle: ""}]);
const jiaoan = ref({keyWord: "",url: "",fileType: 2,subTitle: ""});
const baogao = ref({keyWord: "",url: "",fileType: 2,subTitle: ""});
const fangan = ref({keyWord: "",url: "",fileType: 2,subTitle: ""});
const biaozhun = ref({keyWord: "",url: "",fileType: 2,subTitle: ""});
const shuoming = ref({keyWord: "",url: "",fileType: 2,subTitle: ""});

const ruleFormRef = ref()
const ruleForm = ref({
    itemId: 0, 
    mark: "", //评语
    dimension1: "", //教学实施报告
    dimension2 : "", //教案
    dimension3: "", //视频资料
    dimension4: "", //专业⼈才培养⽅案 
    dimension5: "", //课程标准（或实施案）
    dimension6: "" //教材选⽤说明
})

const check = (rule: any, value: any, callback: any) => {
    if (value === '') 
    {
        callback(new Error('内容不能为空'))
    }
    else 
    {
        callback()
    }
}

const rules = ref<FormRules<typeof ruleForm>>({
    dimension1: [{ validator: check, trigger: 'blur' }],
    dimension2: [{ validator: check, trigger: 'blur' }],
    dimension3: [{ validator: check, trigger: 'blur' }],
    dimension4: [{ validator: check, trigger: 'blur' }],
    dimension5: [{ validator: check, trigger: 'blur' }],
    dimension6: [{ validator: check, trigger: 'blur' }],
    mark: [{ validator: check, trigger: 'blur' }]
})

const comScord = computed(()=>{
    return Number(ruleForm.value.dimension1) +
    Number(ruleForm.value.dimension2)+
    Number(ruleForm.value.dimension3)+
    Number(ruleForm.value.dimension4)+
    Number(ruleForm.value.dimension5)+
    Number(ruleForm.value.dimension6);
})

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) 
    {
        addScord(ruleForm.value)
        .then((res)=>{
            console.log(res.data);
            if(String(res.data.code) === '200')
            {
                ElMessage({showClose: true,message: '操作成功',type: 'success'});  
                ruleForm.value = {itemId: 0, mark: "", //评语
                dimension1: "", //教学实施报告
                dimension2 : "", //教案
                dimension3: "", //视频资料
                dimension4: "", //专业⼈才培养⽅案 
                dimension5: "", //课程标准（或实施案）
                dimension6: "" //教材选⽤说明
                }     
            }
            else
            {
                ElMessage({showClose: true,message: '操作错误',type: 'error'});
                console.log(res);
            }
        }).catch((err:any)=>{console.log(err);})
    } else {
      ElMessage({
        showClose: true,
        message: '错误的提交',
        type: 'error'
      });
    }
  })
  loading.close();
}

//上一个评审
const toPre = ()=>{
    let i = reviewIndex.value-1;
    if(i==-1)
    {
        console.log(reviewIndex.value);
        ElMessage({showClose: true,message: '已经到第一个了!',type: 'error'});
        throw new Error("已经到第一个了!");
    }
    store.setReviewIndex(i);
    store.setReviewId(tableData.value[i].itemId);
    init();
}
const toSumb = (form:any)=>{
    submitForm(form);
    router.push('/review');
}
//提交并跳转下一个评审
const toNext = (form:any)=>{
    submitForm(form);
    let i = reviewIndex.value+1;
    if(i==tableData.value.length)
    {
        i--;
        console.log(reviewIndex.value);
        ElMessage({showClose: true,message: '已经到最后一个了!',type: 'error'});
        throw new Error("已经到最后一个了!");
    }
    store.setReviewIndex(i);
    store.setReviewId(tableData.value[i].itemId);
    init();
}

//提取文件数据
const selectData = ()=>{
    videoList.value = [];
    for(let i = 0;i<opus.value.dsItemSubList.length;i++)
    {
        let data = opus.value.dsItemSubList[i];
        if(data.fileType == 1&&data.url.length>0) videoList.value.push(opus.value.dsItemSubList[i]);
        else
        {
            if (data.keyWord=='jiaoan') jiaoan.value = data;
            else if (data.keyWord=='baogao') baogao.value = data;
            else if (data.keyWord=='fangan') fangan.value = data;
            else if (data.keyWord=='biaozhun') biaozhun.value = data;
            else if (data.keyWord=='shuoming') shuoming.value = data;
        }
    }
}

const init = ()=>{
    getReviewMsg(reviewId.value)
    .then((res:any)=>{
            if(String(res.data.code) == '200')
            {
                console.log(res.data)
                ElMessage({showClose: true,message: "操作成功",type: 'success'});
                opus.value = res.data.data;
                ruleForm.value.itemId = opus.value.itemId;
                selectData();
            }else{
                ElMessage({showClose: true,message: '操作失败',type: 'error'});
                console.log(res);
            }
        }).catch((err:any)=>{console.log(err);})
}

//获取分类
const getClass = ()=>{
    if(opus.value.classOne == 0) return '思政课组';
    else if(opus.value.classOne == 1) return '公共基础课程组';
    else if(opus.value.classOne == 2) return '专业技能课程⼀组';
    else if(opus.value.classOne == 3) return '专业技能课程⼆组';
    return '';
}
//打开并下载pdf文件
const download = (url:string)=>{
    window.open('http://reg.vip.cpolar.cn'+url);
}

onMounted(()=>{
    init();
})
</script>

<style scoped>
#review-show
{
    margin: 0;
    width: 100%;
    height: auto;
    background-color: #efefef;
    overflow:auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rText
{
    width: 100%;
    margin-left: 6vw;
    margin-right: 6vw;
    margin-bottom: 2vw;
    overflow:auto;
    border-radius: 1vw;
}
.rText .til
{
    margin-top: 1vw;
}
.bk1,.bk2
{
    width: 100%;
    margin-top: 1vw;
    min-height: 10vw;
    background-color: #ffffff;
    overflow: auto;
}
table
{
    border-collapse: collapse;
    width: 95%;
    margin: 1.2vw;
}
td,th
{
    min-width: 3vw;
    padding: 1vw;
    border: 1px solid gainsboro;
}
.pdfg
{
    min-width: 10vw;
    display: flex;
    align-items: center;
}
.pdfname
{
    margin-left: 1.2vw;
    min-width: 10vw;
}
</style>